<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Metamorphosis Design Free Css Templates</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
		<!-- Pirobox setup and styles -->
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$().piroBox({
			my_speed: 400, //animation speed
			bg_alpha: 0.1, //background opacity
			slideShow : false, // true == slideshow on, false == slideshow off
			slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
			close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox

	});
});
</script>

<link href="images/style.css" rel="stylesheet" type="text/css" />


<!-- Pirobox setup and styles end-->
		
    </head>
    <body>
        <div id="top_header">
            <div id="logo">
                <p><a href="#">MyDesign</a></p>
                <small class="small_logo"><a href="#">small slogan goes here</a></small>
            </div>
            <div id="link_bar">
                <ul>
                    <li><a href="#"><img src="images/link1.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link2.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link3.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link4.png" alt="" title="img"/></a></li>
                    <li><a href="#"><img src="images/link5.png" alt="" title="img"/></a></li>
                </ul>
            </div>
            <div id="header_border_top"></div>
        </div>
        <div id="menu_bg">
            <div id="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="aboutus.html">About Us</a></li>
                    <li><a href="contactus.html" class="active">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div id="header_bottom">
            <p>Phasellus tortor metus, ullamcorper a tincidunt quis, fermentum id turpis. Pellentesque commodo, mauris quis sodales faucibus, dui lorem tincidunt purus, non egestas nibh nisi et leo. Donec feugiat tempus nibh vitae aliquam. Curabitur egestas tincidunt lorem eget faucibus. </p>
        </div>
        <div class="header_bor_bot">
            <div class="start_now"><a href="#">start now!</a></div>
        </div>

        <div id="content">
            <div id="contact_box">
                <div class="aboutus">
                        <img src="images/title8.png" alt="" title="" style="padding-left: 10px; padding-top: 3px; float: left;"/>
                        <h2>Contact us</h2>
                </div>
                <div class="con_bg_top"></div>
                <div class="col_bg">
                    <div class="col_grad_bot">
                        <div class="col_grad_top">
                            <div id="contact_bg">
                                <div id="contactus_left">
                                    <h4>Contact Details</h4>
                                    <img src="images/location.jpg" alt="" title="" style="float: left; padding-right: 10px; padding-bottom: 10px;"/>
                                    <p>Praesent quis semper elit. Sed scelerisque adipiscing auctor. Nullam fringilla tempus luctus. Pellentesque adipiscing, urna suscipit , id egestas tortor urna id sapien. </p>
                                    <br />
                                    <p>Nulla facilisi. Vivamus semper nisl at dui sodales aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada</p>
                                    <br />
                                    <h4>Contact Form</h4>                           
                                    <div id="contact_form">
                                        <form id="form2" method="post" action="#">
                                            <fieldset>
                                                <label for="con_name">Name: (Required) </label><br />
                                                <input id="con_name" type="text" name="con_name" value="" alt=""/><br />
                                                <label for="con_email">Email Address: (Required)  </label><br />
                                                <input id="con_email" type="text" name="con_email" value="" alt=""/><br />
                                                <label for="con_website">Website Address:</label><br />
                                                <input id="con_website" type="text" name="con_website" value="" alt=""/><br />
                                                <label for="con_mess">Message: (Required) </label><br />
                                                <textarea id="con_mess" name="con_mess" cols="0" rows="0"></textarea><br />
                                                <input type="submit" id="contact-submit" value="Send"/>
                                            </fieldset>
                                        </form>
                                    </div>
                                </div>

                                <div id="contactus_right">
                                    <h4>Our First Address</h4>
                                    <div class="con_hr"></div>
                                    <p>I293 - 39485 nteger semper, felis eget imperdiet commodo,</p>
                                    <p>Punc augue luctus sem, a tincidunt dolor Vivamus interdum, tortor at  3234</p>
                                    <a href="#">somename@companyname.com</a>
                                    <br /><br />
                                    <div class="con_hr"></div>
                                    <h4>Our Second Address</h4>
                                    <div class="con_hr"></div>

                                    <p>976 - 785 felis eget imperdiet commodo, </p>
                                    <p>Punc augue luctus sem, ia tincidunt </p>
                                    <p>Dolor eget imperdiet com</p>
                                    <p>Vivamus interdum, tortor at  6765</p>
                                    <a href="#">somename@companyname.com</a>
                                    <br /><br />
                                    <div class="con_hr"></div>
                                    <h4>Call Us</h4>
                                    <div class="con_hr"></div>
                                    <p>Tel &emsp; +44(0) 201 234 467</p>
                                    <p>Fax &emsp; +44(0) 207 654 321</p>

                                </div>
                                <div style="clear: both"></div>
                            </div>

                        </div>
                        <div style="clear: both"></div>
                    </div>
                </div>
                <div class="con_bg_bot"></div>
            </div>
            <div class="con_white_hr"></div>
            <div class="column_box">
                <div class="col1">
                    <h2>Get Free Quote</h2>
                    <div id="log">
                        <form id="form1" method="post" action="#">
                            <fieldset>
                                <label for="text1">Name: (Required) </label><br />
                                <input id="text1" type="text" name="text1" value="" alt=""/><br />
                                <label for="text2">Email Address: (Required)</label><br />
                                <input id="text2" type="text" name="text2" value="" alt=""/><br />
                                <label for="text2">Message: (Required) </label><br />
                                <textarea id="text_mess" name="text_mess" cols="0" rows="0"></textarea><br />
                                <input type="submit" id="login-submit" value="Send"/>
                            </fieldset>
                        </form>
                    </div>
                </div>
                <div class="col2">
                    <h2>Our Contact Info</h2>
                    <p class="bg_black">Vivamus dui magna, sodales eu porta tristique eget ligula. Quisque semper purus ac purus adipiscing sed iaculis turpis venenatis. Curabitur gravida eros sit amet sem euismod dignissim. </p>
                    <h2>Our Partner's Links</h2>
                    <ul class="ul_bot">
                         <li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">Free Website Templates</a></li>
                                    <li><a href="http://www.metamorphozis.com/free_flash_templates/free_flash_templates.php">Free Flash Templates</a></li>
                                    <li><a href="http://www.metamorphozis.com/shop/easy_flash_templates.php">Easy Flash Templates</a></li>
         <li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
                                    <li><a href="http://www.metamorphozis.com/blog/category/free-fonts/">Free Fonts</a></li>
									<li><a href="http://www.metamorphozis.com/blog/category/freeicons/">Free Icons</a></li>
									<li><a href="http://www.metamorphozis.com/blog/category/free-photoshop-brushes/">Free Photoshop Brushes</a></li>
									<li><a href="http://www.metamorphozis.com/blog/feed/">RSS Subscribe</a></li>
                    </ul>
                </div>

                <div class="col3">
                    <h2>Recent Projects</h2>
                    <a href="images/metamorph_lighting.jpg"  class="pirobox_footer"><img class="img_bor" src="pic/pic-02.jpg" alt="" title="pic-01" /></a>
                    <a href="images/metamorph_ball.jpg"  class="pirobox_footer"><img class="img_bor" src="pic/pic-03.jpg" alt="" title="pic-01" /></a>
                </div>
            </div>
            <div class="con_white_hr"></div>
        </div>


        <div id="footer">
            <p>Copyright  2010. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p> 
	<!-- Please DO NOT remove the following notice --><p>Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a>, coded by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a></p><!-- end of copyright notice-->
        </div>

    </body>
</html>
